<template>
  <div>
    <a-drawer
      title="账单明细"
      :width="1100"
      :visible="visible"
      @close="onClose"
      :destroyOnClose="true"
      :headerStyle="{height: '54px'}"
    >
      <!-- 账单详情的头部 -->
      <div class="detail-head" ref="detailHeadRef">
        <div class="head-left">
          <div class="head-left-left">
            <span class="icon-detail"></span>
            <span class="month-txt" :style="iconStyle">{{billObj.accountPeriod | dateFilter}}</span>
          </div>
          <div class="head-left-right">
            <div class="head-item">
              <span class="head-item-title">买家:</span>
              <span class="head-item-content">{{billObj.tenantName}}</span>
              <span class="head-item-title">对账总金额:</span>
              <span class="head-item-content-red">¥{{billObj.price | priceFilter}}</span>
            </div>
            <div class="head-item">
              <span class="head-item-title">账单时间:</span>
              <span class="head-item-content">{{billObj | datePeriod}}</span>
              <span class="head-item-title">对账单号:</span>
              <span class="head-item-content">{{billObj.code}}</span>
            </div>
          </div>
        </div>
        <div class="head-right" :class="[billObj.invoiceStatusEnum==='UN'?'':'active']">
          <span class="left-tag"></span>
          <span class="right-tag">{{billObj.invoiceStatusEnum==='UN'?'待开票':'已开票'}}</span>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="bill-line" ref="billLineRef"></div>

      <!-- tab栏以及tab栏内容 -->
      <div class="tab-all">
        <!-- Tab栏 -->
        <div class="tab-itself" ref="tabItselfRef">
          <div class="tab-left">
            <span @click="tabClicked(1)" :class="{'active': tabIndex === 1}">商品详情</span>
            <span @click="tabClicked(2)" :class="{'active': tabIndex === 2}">订单详情</span>
          </div>
          <!-- 商品详情的搜索框 -->
          <div class="tab-right">
            <div class="ipt-new" v-show="tabIndex === 1">
              <input type="text" 
              v-model="goodsQuery.searchName"
              @blur="goodsSearchBlur"
              @keyup.enter="$event.target.blur"
              placeholder="搜索订单编号/业务单号/商品名称/商品编码">
              <div class="ipt-icon"></div>
            </div>
            <div class="export-btn" v-show="tabIndex === 1">
              <span></span>
              <span>批量导出</span>
            </div>
            <!-- 订单详情的搜索框 -->
            <div class="outer-box-new" v-show="tabIndex === 2">
              <div class="ipt-new ipt-custom">
                <input type="text" 
                v-model="orderQuery.searchName"
                @blur="orderSearchBlur"
                @keyup.enter="$event.target.blur"
                placeholder="搜索订单编号">
                <div class="ipt-icon"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 商品详情 Tab栏第一部分 -->
        <div class="goods-detail" v-show="tabIndex === 1">
          <!-- 商品详情搜索框部分 -->
          <div class="goods-search">
            <div class="goods-search-left">
              <div class="date-box">
                <span class="form-title">业务时间：</span>
                <a-range-picker :placeholder="['开始日期','结束日期']"
                                @change="dateChange"
                                :value="goodsQuery.initDate"
                                valueFormat="YYYY-MM-DD HH:mm:ss"
                                style="width:184px">
                  <a-icon slot="suffixIcon"
                          type="calendar" />
                </a-range-picker>
              </div>
            </div>
            <div class="goods-search-right">
              <div @click="resetGoods">重置</div>
            </div>
          </div>
          <!-- 商品详情表格部分 -->
          <div class="goods-content">
            <!-- thead部分 -->
            <table class="tb c-100">
              <thead>
                <tr>
                  <th class="width-5">序号</th>
                  <th class="width-96">订单编号</th>
                  <th class="width-96">业务单号</th>
                  <th class="width-182">业务时间</th>
                  <th class="width-96">商品编码</th>
                  <th class="width-96">商品名称</th>
                  <th class="width-96">商品单价(元)</th>
                  <th class="width-96">对账数量</th>
                  <th class="width-96">对账金额</th>
                  <th class="width-96 custom-th" 
                  :class="[activeFlag==='filter1'||activeFlag==='filter2'?'active':'']" 
                  @click="filterTh">类型<span class="table-th-icon"></span></th>
                </tr>
              </thead>
            </table>
            <!-- tbody部分 -->
            <table class="tb c-100">
              <tbody>
                <template v-for="(item,index) in goodsData" >
                  <tr :key="item.id">
                    <td class="width-5">{{index}}</td>
                    <td class="width-96">{{item.subOrderNo}}</td>
                    <td class="width-96">{{item.businessNo}}</td>
                    <td class="width-182">{{item.businessTime|dateFull(that)}}</td>
                    <td class="width-96">{{item.materialCode}}</td>
                    <td class="width-96">{{item.materialName}}</td>
                    <td class="width-96">{{item.materialPrice|priceFilter}}</td>
                    <td class="width-96">{{item.accountNum}}</td>
                    <td class="width-96">{{item.accountPrice|priceFilter}}</td>
                    <td class="width-96">{{typeMapping[item.accountType]}}</td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
          <!-- 统计行部分 -->
          <div class="total-row">
            <table class="tb c-100">
              <tbody>
                <tr>
                  <td class="width-5">合计</td>
                  <td class="width-96"></td>
                  <td class="width-96"></td>
                  <td class="width-182"></td>
                  <td class="width-96"></td>
                  <td class="width-96"></td>
                  <td class="width-96 red-col">¥{{totalGoodsPrice|priceCommaFilter}}</td>
                  <td class="width-96">{{totalGoodsNum}}</td>
                  <td class="width-96 red-col">¥{{totalGoodsBill|priceCommaFilter}}</td>
                  <td class="width-96"></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="goods-blank"></div>
        </div>

        <!-- 订单详情 Tab栏第二部分 -->
        <div class="order-detail" v-show="tabIndex === 2">
        <!-- 动态计算高度 暂时保留 -->
        <!-- <div class="order-detail" v-show="tabIndex === 2" :style="{'max-height': `calc(100vh - ${scrollHeight}px)`, 'overflow-y': 'auto'}"> -->
          <template v-for="item in orderData">
            <div class="order-box" :key="item.id">
              <!-- 订单详情头部 -->
              <div class="order-head">
                <div class="order-head-left">
                  <span class="order-head-title">订单编号：</span>
                  <span class="order-head-text" style="margin-right:31px; color:#3483FF;">{{item.subOrderNo}}</span>
                  <span class="order-head-title">订单金额：</span>
                  <span class="order-head-text">
                    <span class="rmb-icon">¥</span><span class="rmb-txt">{{item.orderPrice|priceCommaFilter}}</span>
                  </span>
                </div>
                <div class="order-head-right">
                  <span class="order-head-title">订单日期：</span>
                  <span class="order-head-text" style="color:#272424">{{item.orderDate|dateFull(that)}}</span>
                </div>
              </div>
              <!-- 订单详情详情 -->
              <div class="order-content">
                <div class="order-content-item">
                  <div class="order-content-item-top">
                    <div class="order-content-title">
                      <span style="margin-right:3px">本月对账</span>
                      <a-tooltip placement="top" :overlayStyle="tooltipStyle">
                        <template slot="title">
                          <span>本月对账金额等于本月已确认收货金额减去本月已确认退货金额</span>
                        </template>
                        <span class="tips-icon"></span>
                      </a-tooltip>
                    </div>
                    <div class="order-content-text">
                      <span>¥</span>
                      <span>{{item.accountPrice|priceCommaFilter}}</span>
                    </div>
                  </div>
                  <div class="order-content-item-bot">
                    <div class="price-title-row">
                      <div>收货</div>
                      <div><span>-</span>¥{{item.accountReceivePrice|priceCommaFilter}}</div>
                    </div>
                    <div class="price-title-row">
                      <div>退款</div>
                      <div><span>-</span>¥{{item.accountRefundPrice|priceCommaFilter}}</div>
                    </div>
                  </div>
                </div>
                <div class="order-content-item">
                  <div class="order-content-item-top">
                    <div class="order-content-title">
                      <span style="margin-right:3px">售后</span>
                      <a-tooltip placement="top" :overlayStyle="tooltipStyle">
                        <template slot="title">
                          <span>售后金额等于未收货退款加上退货退款</span>
                        </template>
                        <span class="tips-icon"></span>
                      </a-tooltip>
                    </div>
                    <div class="order-content-text">
                      <span>¥</span>
                      <span>{{item.afterSalePrice|priceCommaFilter}}</span>
                    </div>
                  </div>
                  <div class="order-content-item-bot">
                    <div class="price-title-row">
                      <div>未收货退款</div>
                      <div><span>-</span>¥{{item.unReceiveRefundPrice|priceCommaFilter}}</div>
                    </div>
                    <div class="price-title-row">
                      <div>退货退款</div>
                      <div><span>-</span>¥{{item.returnRefundPrice|priceCommaFilter}}</div>
                    </div>
                  </div>
                </div>
                <div class="order-content-item">
                  <div class="order-content-item-top">
                    <div class="order-content-title">
                      <span style="margin-right:3px">未对账</span>
                      <a-tooltip placement="top" :overlayStyle="tooltipStyle">
                        <template slot="title">
                          <span>售后金额等于未收货退款加上退货退款</span>
                        </template>
                        <span class="tips-icon"></span>
                      </a-tooltip>
                    </div>
                    <div class="order-content-text">
                      <span>¥</span>
                      <span>{{item.unAccountPrice|priceCommaFilter}}</span>
                    </div>
                  </div>
                  <div class="order-content-item-bot custom-bot-row">
                    <div class="price-title-row">
                      <div>待收货</div>
                      <div>¥{{item.toReceivePrice|priceCommaFilter}}</div>
                    </div>
                  </div>
                </div>
                <div class="order-content-item align-center">
                  <div class="expand-item" :class="item.showFlag1?'active':''">
                    <span></span>
                    <span>收货单</span>
                    <span @click="activeFlag1(item.id)">{{item.showFlag1?'收起':'查看'}}</span>
                  </div>
                  <div class="expand-item" style="margin-top:13px" :class="item.showFlag2?'active':''">
                    <span></span>
                    <span>售后单</span>
                    <span @click="activeFlag2(item.id)">{{item.showFlag2?'收起':'查看'}}</span>
                  </div>
                </div>
              </div>
              <!-- 订单详情表格 -->
              <div class="order-table" v-if="item.showFlag1 || item.showFlag2">
                <div class="order-table-shadow">
                  <table class="tb c-100" v-if="item.showFlag1">
                    <thead>
                      <tr>
                        <th class="width-50">序号</th>
                        <th class="width-190">业务单号</th>
                        <th class="width-190">业务时间</th>
                        <th class="width-190">商品编码</th>
                        <th class="width-95">商品名称</th>
                        <th class="width-95">商品单价(元)</th>
                        <th class="width-95">收货数量</th>
                        <th class="width-95">商品金额(元)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-for="(item,index) in goodsData">
                        <tr :key="item.no">
                          <td class="width-50">{{index+1}}</td>
                          <td class="width-190">{{'SHDD202104120987'}}</td>
                          <td class="width-190">{{'2021-12-12 12:12:00'}}</td>
                          <td class="width-190">{{'S19719099560'}}</td>
                          <td class="width-95">{{'机油'}}</td>
                          <td class="width-95">{{200}}</td>
                          <td class="width-95">{{10}}</td>
                          <td class="width-95">{{2000}}</td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                  <table class="tb c-100" v-if="item.showFlag2">
                    <thead>
                      <tr>
                        <th class="width-50">序号</th>
                        <th class="width-190">售后单号</th>
                        <th class="width-190">业务时间</th>
                        <th class="width-95">售后单类型</th>
                        <th class="width-190">商品编码</th>
                        <th class="width-95">商品名称</th>
                        <th class="width-95">售后数量</th>
                        <th class="width-95">售后金额(元)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-for="(item,index) in goodsData" >
                        <tr :key="item.no">
                          <td class="width-50">{{index+1}}</td>
                          <td class="width-190">{{'SHDD202104120987'}}</td>
                          <td class="width-190">{{'2021-12-12 12:12:00'}}</td>
                          <td class="width-95">{{'已收货'}}</td>
                          <td class="width-190">{{'S19719099560'}}</td>
                          <td class="width-95">{{'机油'}}</td>
                          <td class="width-95">{{10}}</td>
                          <td class="width-95">{{2000}}</td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </template>
          <div class="order-blank"></div>
        </div>
      </div>

      <!-- 底部固定内容 -->
      <div class="bill-footer" ref="billFooterRef">
        <div class="bill-footer-goods" v-show="tabIndex === 1" >
          <!-- <div class="goods-left">
            <span>
              <i></i>
              <i>收货数量（个）：</i>
              <i>200</i>
            </span>
            <span></span>
            <span>
              <i></i>
              <i>商品金额：</i>
              <i>200</i>
            </span>
          </div> -->
          <div class="goods-right">
            <span class="total-page">共{{goodsTotal}}条</span>
            <pagination 
              @pageChange="goodsPageChange"
              @pageSizeChange="goodsSizeChange"
              :total="goodsTotal"
              :current="goodsQuery.pageNo">
            </pagination>
          </div>
        </div>
        <div class="bill-footer-order" v-show="tabIndex === 2">
          <div class="order-right">
            <span class="total-page">共{{orderTotal}}条</span>
            <pagination 
              @pageChange="orderPageChange"
              @pageSizeChange="orderSizeChange"
              :total="orderTotal"
              :current="orderQuery.pageNo">
            </pagination>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import Pagination from '@/components/common/pagination'

const goodsData = [
  {
    id:'001',
    subOrderNo: 'SHDD202104120981',
    businessNo: 'SHDD202104120981',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 111,
    accountNum: 10,
    accountPrice: 3000,
    accountType: 1
  },{
    id:'002',
    subOrderNo: 'SHDD202104120988',
    businessNo: 'SHDD202104120988',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵',
    materialPrice: 222,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 2
  },{
    id:'003',
    subOrderNo: 'SHDD202104120989',
    businessNo: 'SHDD202104120989',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵',
    materialPrice: 333,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 2
  },{
    id:'004',
    subOrderNo: 'SHDD202104120990',
    businessNo: 'SHDD202104120990',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵',
    materialPrice: 444,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 2
  },{
    id:'005',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'006',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'007',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'008',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'009',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'010',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'011',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'012',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  },{
    id:'013',
    subOrderNo: 'SHDD202104120991',
    businessNo: 'SHDD202104120991',
    businessTime: "2020-12-31T16:00:00.000+00:00",
    materialCode: 'ZXZLB0303032',
    materialName: '转向助力泵1',
    materialPrice: 555,
    accountNum: 10,
    accountPrice: 2022,
    accountType: 1
  }
]

const orderData = [
  {
    subOrderId: "001",
    subOrderNo: "S197109099560",
    orderPrice: 4300,
    orderDate: '2020-12-31T16:00:00.000+00:00',
    accountPrice: 39000,
    accountReceivePrice: 59000,
    accountRefundPrice: 59000,
    afterSalePrice: 39000,
    unReceiveRefundPrice: 59000,
    returnRefundPrice: 59000,
    unAccountPrice: 2020,
    toReceivePrice: 2022,
    createBy: "",
    createTime: 0,
    id: "001",
    supplierId: "",
    tenantId: "",
    updateBy: "",
    updateTime: 0
  },
  {
    subOrderId: "002",
    subOrderNo: "S197109099560",
    orderPrice: 4300,
    orderDate: '2020-12-31T16:00:00.000+00:00',
    accountPrice: 39000,
    accountReceivePrice: 59000,
    accountRefundPrice: 59000,
    afterSalePrice: 39000,
    unReceiveRefundPrice: 59000,
    returnRefundPrice: 59000,
    unAccountPrice: 2020,
    toReceivePrice: 2022,
    createBy: "",
    createTime: 0,
    id: "002",
    supplierId: "",
    tenantId: "",
    updateBy: "",
    updateTime: 0
  },
  {
    subOrderId: "003",
    subOrderNo: "S197109099560",
    orderPrice: 4300,
    orderDate: '2020-12-31T16:00:00.000+00:00',
    accountPrice: 39000,
    accountReceivePrice: 59000,
    accountRefundPrice: 59000,
    afterSalePrice: 39000,
    unReceiveRefundPrice: 59000,
    returnRefundPrice: 59000,
    unAccountPrice: 2020,
    toReceivePrice: 2022,
    createBy: "",
    createTime: 0,
    id: "003",
    supplierId: "",
    tenantId: "",
    updateBy: "",
    updateTime: 0
  },
  {
    subOrderId: "004",
    subOrderNo: "S197109099560",
    orderPrice: 4300,
    orderDate: '2020-12-31T16:00:00.000+00:00',
    accountPrice: 39000,
    accountReceivePrice: 59000,
    accountRefundPrice: 59000,
    afterSalePrice: 39000,
    unReceiveRefundPrice: 59000,
    returnRefundPrice: 59000,
    unAccountPrice: 2020,
    toReceivePrice: 2022,
    createBy: "",
    createTime: 0,
    id: "004",
    supplierId: "",
    tenantId: "",
    updateBy: "",
    updateTime: 0
  },
  {
    subOrderId: "005",
    subOrderNo: "S197109099560",
    orderPrice: 4300,
    orderDate: '2020-12-31T16:00:00.000+00:00',
    accountPrice: 39000,
    accountReceivePrice: 59000,
    accountRefundPrice: 59000,
    afterSalePrice: 39000,
    unReceiveRefundPrice: 59000,
    returnRefundPrice: 59000,
    unAccountPrice: 2020,
    toReceivePrice: 2022,
    createBy: "",
    createTime: 0,
    id: "005",
    supplierId: "",
    tenantId: "",
    updateBy: "",
    updateTime: 0
  }
]

export default {
  components:{Pagination},
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    billObj: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  watch: {
    // 监听drawer的显示与否
    visible: function(val) {
      if(val){
        this.tabIndex = 1
        this.getGoodsData()
        this.getOrderDetails()
        console.log(this.billObj);

        // icon图标的位置动态变化
        if(this.billObj.accountPeriod){
          if(new Date(this.billObj.accountPeriod).getMonth() + 1>9) {
            this.iconStyle = {"right":"1px"}
          }else{
            this.iconStyle = {"right":"6px"}
          }
        }

        // 动态计算高度 暂时保留
        // this.$nextTick(() => {
        //   this.getScrollHeight()
        // })
        // window.addEventListener('resize', this.getScrollHeight, false)
      }else {
        // 动态计算高度 暂时保留
        // window.removeEventListener('resize', this.getScrollHeight)
        
      }
    }
  },
  filters: {
    // 格式化千分符
    priceCommaFilter (val) {
      if (!val) {
        return '0.00'
      } else {
        let initStr = String(parseFloat(val).toFixed(2)).split('.')
        let intStr = initStr[0].split('').reverse().reduce((pre, next, index) => {
          return (index % 3) ? (next + "" + pre) : (next + ',' + pre);
        })
        let decStr = initStr[1]
        return intStr + '.' + decStr
      }
    },
    // 格式化小数后两位
    priceFilter(val) {
      if(!val){
        return '0.00'
      }else {
        return parseFloat(val).toFixed(2)
      }
    },
    // 格式化X月
    dateFilter(val) {
      if(val){
        return new Date(val).getMonth() + 1 +'月'
      }else {
        return ''
      }
    },
    // 格式化yyyy/mm/dd - yy/dd
    datePeriod(val){
      if(val.startDate && val.endDate){
        let year = new Date(val.startDate).getFullYear()
        let month = new Date(val.startDate).getMonth() + 1
        let monthFormat = month<10? '0'+month:month
        let days = new Date(val.startDate).getDate()
        let daysFormat = days<10? '0'+days:days
        
        let year1 = new Date(val.endDate).getFullYear()
        let month1 = new Date(val.endDate).getMonth()+1
        let monthFormat1 = month1<10?'0'+month1:month1
        let days1 = new Date(val.endDate).getDate()
        let daysFormat1 = days1<10? '0'+days1:days1

        if(year === year1){
          return year + '/' + monthFormat + '/' + daysFormat + ' - ' + monthFormat1 + '/' + daysFormat1
        }else {
          return year + '/' + monthFormat + '/' + daysFormat + ' - ' + year1 + '/' + monthFormat1 + '/' + daysFormat1
        }
      }else {
        return ''
      }
    },
    // 格式化yyyy-mm-dd hh:mm:ss
    dateFull(val, that){
      if(val){
        return that.formatDate(val)
      }else {
        return ''
      }
    }
  },
  data(){
    return {
      that:this,
      // 类型筛选的标识符
      activeFlag:'init',
      // 用来做类型筛选时保存的数据
      temGoodsData:[],
      // 商品表格数据
      goodsData:[],
      // 订单详情数据
      orderData:[],
      // tab栏标识符
      tabIndex: 1,
      // 动态高度数值 暂时舍弃
      scrollHeight: '',
      // tooltip样式
      tooltipStyle:{opacity: '0.8', color: '#fff', 'min-width': '230px', 'font-size':'12px'},
      // icon的动态样式 初始值
      iconStyle:{},
      // 商品详情table的total数据
      goodsTotal: 0,
      // 订单详情table的total数据
      orderTotal: 0,
      // 商品详情tab的请求数据
      goodsQuery:{
        initDate:[],
        startDate: '',
        endDate: '',
        pageNo: 1,
        pageSize: 10,
        searchName: ''
      },
      // 订单详情tab的请求数据
      orderQuery:{
        pageNo: 1,
        pageSize: 10,
        searchName: ''
      },
      // 类型的映射
      typeMapping: {
        "1":"收货",
        "2":"售后"
      }
    }
  },
  computed:{
    totalGoodsPrice(){
      return this.goodsData.length>0?this.goodsData.reduce((totalPrice, item) => totalPrice + item.materialPrice, 0):0
    },
    totalGoodsNum(){
      return this.goodsData.length>0?this.goodsData.reduce((totalNum, item) => totalNum + item.accountNum, 0):0
    },
    totalGoodsBill(){
      return this.goodsData.length>0?this.goodsData.reduce((totalBill, item) => totalBill + item.accountPrice, 0):0
    }
  },
  methods:{
    // 获取商品详情数据
    getGoodsData(){
      let tenantId = this.$store.state.user.currentTenant.id

      this.$store.dispatch('request', this.$api.sellerCenter.getDetailPage(
        {...this.goodsQuery, supplierId: this.billObj.tenantId, tenantId}
      )).then(res=>{
        // console.log(res);
        if(res&&res.code&&res.code===1){
          this.goodsData = res.result.records || []
          this.goodsTotal = res.result.total
          this.goodsData = goodsData
        }else {
          this.$message.error(res.message||'获取数据失败')
          this.goodsData = []
          this.goodsTotal = 0
        }
      })
    },
    // 获取账单详情数据
    getOrderDetails(){
      let tenantId = this.$store.state.user.currentTenant.id

      this.$store.dispatch('request', this.$api.sellerCenter.getOrderDetailPage(
        {...this.orderQuery, supplierId: this.billObj.tenantId, tenantId}
      )).then(res=>{
        // console.log(res);
        if(res&&res.code&&res.code===1){ 
          if(!res.records) {res.result = {}}
          this.orderData = res.result.records || []
          this.orderTotal = res.result.total
          this.orderData = orderData
        }else {
          this.$message.error(res.message||'获取数据失败')
          this.orderData = []
          this.orderTotal = 0
        }
      })
    },
    // 点击切换tab栏
    tabClicked(index){
      this.tabIndex = index

      if(this.tabIndex===1){
        this.resetGoods()
      }else if (this.tabIndex===2){
        this.orderQuery.pageNo = 1
        this.orderQuery.searchName = ''
        this.getOrderDetails()
      }
    },
    // 商品详情 业务时间变化时触发
    dateChange(value, dateString){
      // console.log(dateString);
      this.goodsQuery.initDate = dateString
      this.goodsQuery.startDate = dateString[0]
      this.goodsQuery.endDate = dateString[1]
      this.goodsQuery.pageNo = 1
      this.getGoodsData()
    },
    // 商品详情搜索框失焦
    goodsSearchBlur(){
      this.goodsQuery.pageNo = 1
      this.getGoodsData()
    },
    // 订单详情搜索框失焦
    orderSearchBlur(){
      this.orderQuery.pageNo = 1
      this.getOrderDetails()
    },
    // 商品详情页码变化
    goodsPageChange(page){
      this.goodsQuery.pageNo = page
      this.getGoodsData()
    },
    // 商品详情页条数变化
    goodsSizeChange(size){
      this.goodsQuery.pageSize = size
      this.getGoodsData()
    },
    // 订单详情页码变化
    orderPageChange(page){
      this.orderQuery.pageNo = page
      this.getOrderDetails()
    },
    // 订单详情页条数变化
    orderSizeChange(size){
      this.orderQuery.pageSize = size
      this.getOrderDetails()
    },
    // 获取滚动区域高度
    getScrollHeight(){
      this.scrollHeight =  54 + this.$refs.detailHeadRef.offsetHeight + this.$refs.billLineRef.offsetHeight + this.$refs.tabItselfRef.offsetHeight + this.$refs.billFooterRef.offsetHeight
    },
    // drawer关闭时触发
    onClose(){
      this.$emit('cancel')
      this.goodsData = []
      this.orderDate = []
      this.resetGoodsClose()
      this.resetOrderClose()
      this.goodsQuery.pageSize = 10
      this.orderQuery.pageSize = 10
    },
    // 点击类型th筛选数据
    filterTh(){
      // 如果是init 则表示当前数据为初始数据
      if(this.activeFlag === 'init') {
        this.temGoodsData = JSON.parse(JSON.stringify(this.goodsData))
      }

      // 筛选标识符循环为init - filter1 - filter2
      this.activeFlag = this.activeFlag==='init'?
      'filter1':this.activeFlag==='filter1'?
      'filter2':this.activeFlag==='filter2'?'init':''

      // 如果标识符变为init 则还原为初始数据
      if(this.activeFlag === 'init'){
        this.goodsData = JSON.parse(JSON.stringify(this.temGoodsData))
        // 如果标识符为filter1 则正序
      } else if (this.activeFlag === 'filter1'){
        this.goodsData.sort((a, b) => a.accountType - b.accountType);
        // 如果标识符为filter2 则倒序
      } else if(this.activeFlag === 'filter2') {
        this.goodsData.sort((a, b) => b.accountType - a.accountType);
      }
    },
    // 重置商品详情的数据
    resetGoods(){
      this.resetGoodsClose()
      this.getGoodsData()
    },
    resetGoodsClose(){
      this.goodsQuery.initDate = []
      this.goodsQuery.startDate = ''
      this.goodsQuery.endDate = ''
      this.goodsQuery.pageNo = 1
      this.goodsQuery.searchName = ''
    },
    resetOrderClose(){
      this.orderQuery.pageNo = 1
      this.orderQuery.searchName = ''
    },
    formatDate(date) {
      //格式化时间
      let d = new Date(date);
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
      return times
    },
    // 显示收货单
    activeFlag1(id){
      this.orderData.forEach((item,index)=>{
        if(item.id===id){
          let flag 
          if(item.showFlag1){
            flag = false
          }else {
            flag = true
          }
          this.$set(this.orderData[index], 'showFlag1', flag)
          this.$set(this.orderData[index], 'showFlag2', false)
        }
      })
    },
    // 显示售后单
    activeFlag2(id){
      this.orderData.forEach((item,index)=>{
        if(item.id===id){
          let flag 
          if(item.showFlag2){
            flag = false
          }else {
            flag = true
          }
          this.$set(this.orderData[index], 'showFlag2', flag)
          this.$set(this.orderData[index], 'showFlag1', false)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-drawer-title {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: @newColorGreyFontM;
  line-height: 22px;
}
/deep/ .ant-drawer-body {
  padding: 0;
}
/deep/ .anticon-close svg{
  color: rgba(39,36,36,0.8);
}
/deep/ .ant-calendar-picker-input {
  font-size: 12px;
}
.detail-head {
  display: flex;
  justify-content: space-between;
  padding: 15px 24px;
  .head-left {
    display: flex;
    justify-content: flex-start;
    .head-left-left {
      position: relative;
      .icon-detail {
        display: inline-block;
        width: 48px;
        height: 48px;
        background: url('../../../../assets/image/sellerHub/yf.png') center no-repeat;
        background-size: 48px 48px;
        vertical-align: middle;
      }
      .month-txt {
        position: absolute;
        width: auto;
        right: 2px;
        bottom: 7px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #3483ff;
      }
    }
    .head-left-right {
      margin-left: 24px;
    }
    .head-item {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      line-height: 16px;
      color: rgba(39,36,36,0.70);
      &:first-child {
        margin-bottom: 16px;
      }
      .head-item-title {
        color: rgba(39,36,36,0.70);
      }
      .head-item-content {
        color: @newColorGreyFontM;
        padding-right: 16px;
        margin-right: 16px;
        margin-left: 4px;
        border-right: 1px solid #f2f2f2;;
        &:last-child {
          margin-right: 0;
          border-right: none;
          padding-right: 0;
        }
      }
      .head-item-content-red {
        margin-left: 4px;
        color: @activeRed;
        font-size: 18px;
        font-family: DINAlternate, DINAlternate-Bold;
        font-weight: 700;
      }
    }
  }
  .head-right {
    display: flex;
    align-items: center;
    &.active {
      .left-tag {
        background: url('../../../../assets/image/sellerHub/billicongreen.png') center no-repeat;
        background-size: 50px 50px;
      }
      .right-tag {
        color: #79C860;
      }
    }
    .left-tag {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url('../../../../assets/image/sellerHub/billicon.png') center no-repeat;
      background-size: 50px 50px;
      vertical-align: middle;
    }
    .right-tag {
      display: inline-block;
      margin-left: 5px;
      font-size: 20px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #ff9003;
      vertical-align: middle;
    }
  }
}
.tab-all{
  .tab-itself {
    padding: 23px 23px 0 23px;
    overflow: hidden;
    .tab-left {
      float: left;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      line-height: 14px;
      span {
        cursor: pointer;
        padding-bottom: 17px;
        width: 56px;
        display: inline-block;
        text-align: center;
        border-bottom: 3px solid transparent;
        color: @newColorGreyFontM;
        &:first-child {
          margin-right: 40px;
        }
        &.active {
          color: @activeRed;
          border-bottom: 3px solid @activeRed;
        }
      }
    }
    .tab-right {
      float: right;
      width: 50%;
      display: flex;
      justify-content: flex-end;
      .export-btn {
        display: inline-block;
        width: 96px;
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(39,36,36,0.06);
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all .3s;
        &:hover {
          border-color: rgba(215,55,55,0.60);
        }
        span:first-child{
          display: inline-block;
          width: 13px;
          height: 13px;
          background: url('../../../../assets/image/sellerHub/exporticon.png') center no-repeat;
          background-size: 13px 13px;
          vertical-align: middle;
          margin-top: -2px;
        }
        span:last-child{
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #272424;
          line-height: 32px;
          padding-left: 8px;
        }
      }
      .outer-box {
        width: 320px;
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(39,36,36,0.06);
        border-radius: 3px;
        display: flex;
        transition: all .3s;
        &:hover {
          border-color: rgba(215,55,55,0.60);
          .right-box {
            border-left: 1px solid rgba(215,55,55,0.60);
          }
        }
        .right-box {
          width: 48px;
          line-height: 32px;
          text-align: center;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
          border-left: 1px solid rgba(39,36,36,0.06);
          cursor: pointer;
          user-select: none;
          transition: all .3s;
        }
        .left-box{
          flex: 1;
        }
      }
      .left-box {
        display: flex;
        align-items: center;
        .icon-box {
          width: 13px;
          height: 13px;
          margin-left: 12px;
          margin-right: 11px;
          background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
          background-size: 13px 13px;
          margin-top: 2px;
        }
        input {
          flex: 1;
          border: none;
          height: 30px;
          outline: none;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
        }
      }
    }
  }
}
.bill-line {
  width: 100%;
  height: 8px;
  background: #f8f8f8;
}
.goods-detail {
  padding: 16px 24px;
  .goods-search{
    display: flex;
    justify-content: space-between;
    padding: 24px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.08); 
    margin-bottom: 16px;
    .goods-search-left {
      display: flex;
      justify-content: flex-start;
      .outer-box {
        margin-right: 15px;
        width: 480px;
        height: 32px;
        background: #ffffff;
        border: 1px solid rgba(39,36,36,0.06);
        border-radius: 3px;
        display: flex;
        transition: all .3s;
        &:hover {
          border-color: rgba(215,55,55,0.60);
          .right-box {
            border-left: 1px solid rgba(215,55,55,0.60);
          }
        }
        .right-box {
          width: 48px;
          line-height: 32px;
          text-align: center;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
          border-left: 1px solid rgba(39,36,36,0.06);
          cursor: pointer;
          user-select: none;
          transition: all .3s;
        }
        .left-box{
          flex: 1;
        }
      }
      .left-box {
        display: flex;
        align-items: center;
        .icon-box {
          width: 13px;
          height: 13px;
          margin-left: 12px;
          margin-right: 11px;
          background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
          background-size: 13px 13px;
          margin-top: 2px;
        }
        input {
          flex: 1;
          border: none;
          height: 30px;
          outline: none;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: @newColorGreyFontM;
        }
      }
      .date-box {
        .form-title {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: @newColorGreyFontM;
          line-height: 20px;
        }
      }
    }
    .goods-search-right {
      width: 52px;
      height: 32px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: center;
      color: @newColorGreyFontM;
      line-height: 32px;
      cursor: pointer;
    }
  }
}
.bill-footer {
  position: absolute;
  z-index: 11;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset; 
  .bill-footer-goods {
    display: flex;
    justify-content: flex-end;
    .goods-left {
      span {
        i:first-child {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url('../../../../assets/image/sellerHub/packageicon.png') center no-repeat;
          background-size: 16px 16px;
          vertical-align: middle;
          margin-top: -2px;
          margin-right: 3px;
        }
        i:nth-child(2){
          opacity: 0.6;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-style: normal;
          color: @newColorGreyFontM;
          line-height: 20px;
          margin-right: 8px;
        }
        i:last-child {
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          font-style: normal;
          color: @newColorGreyFontM;
          line-height: 25px;
        }
        &:nth-child(2) {
          display: inline-block;
          width: 1px;
          height: 12px;
          background: #f2f2f2;
          margin-right: 24px;
          margin-left: 24px;
        }
        &:nth-child(3) {
          i:first-child {
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('../../../../assets/image/sellerHub/financeicon.png') center no-repeat;
            background-size: 16px 16px;
            vertical-align: middle;
            margin-top: -2px;
            margin-right: 5px;          
          }
        }
      }
    }
    .goods-right {
      .total-page {
        opacity: 0.8;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: @newColorGreyFontM;
        line-height: 20px;
        margin-right: 16px;
      }
    }
  }
  .bill-footer-order {
    display: flex;
    justify-content: flex-end;
    .total-page {
      opacity: 0.8;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: @newColorGreyFontM;
      line-height: 20px;
      margin-right: 16px;
    }
  }
}
table{
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.c-100 {
	width: 100%;
}
.width-15{
  width: 15%;
}
.width-12 {
  width: 12%;
}
.width-9 {
  width: 9%;
}
.width-7 {
  width: 7%;
}
.width-18 {
  width: 18%;
}
.width-10 {
  width: 10%;
}
.width-13 {
  width: 13%;
}
.width-8 {
  width: 8%;
}
// 新的宽度
.width-182 {
  width: 18.2%;
}
.width-96 {
  width: 9.6%;
}
.width-50 {
  width: 5%;
}
// 新的宽度
.width-190 {
  width: 19%;
}
.width-95 {
  width: 9.5%;
}
.tb th { 
  padding: 11px 12px; 
  border-bottom: 1px solid rgba(39,36,36,0.06); 
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: @newColorGreyFontM;
  vertical-align: middle;
  background-color: #f9f9f9;
}
.tb td { 
  padding: 11px 12px; 
  background-color:#fff; 
  border-bottom:1px solid rgba(39,36,36,0.06); 
  word-wrap: break-word; 
  word-break:break-all; 
  vertical-align: middle;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
.tb tr:hover>td {
	background-color: rgba(215,55,55, .08)!important;
}
.goods-blank {
  width: 100%;
  height: 50px;
}
.order-blank {
  width: 100%;
  height: 55px;
}
.table-th-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../../../../assets/image/sellerHub/shaixuan2.png') center no-repeat;
  background-size: 16px 16px;
  vertical-align: middle;
  margin-left: 5px;
  margin-top: -2px;
}
.order-detail {
  padding: 17px 24px 0 24px;
  .order-box {
    border: 1px solid #eff0f4;
    margin-bottom: 17px;
    &:last-child {
      margin-bottom: 0;
    }
    .order-head {
      padding: 0 23px;
      background: #f9f9f9;
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      .order-head-title {
        color: rgba(39,36,36,0.60);
      }
      .order-head-text {
        color: rgba(39,36,36,1);
      }
    }
    .order-content {
      padding: 16px 0px 16px 25px;
      display: flex;
      justify-content: flex-start;
      .order-content-item {
        box-sizing: border-box;
        border-right: 1px solid #eff0f4;
        height: auto;
        &:nth-child(1){
          width: 28.4%;
          padding-right: 23px;
        }
        &:nth-child(2){
          width: 28.4%;
          padding-left: 23px;
          padding-right: 23px;
        }
        &:nth-child(3){
          width: 28.4%;
          padding-left: 23px;
          padding-right: 23px;
          .order-content-detail {
            display: flex;
            justify-content: flex-start;
          }
        }
        &:nth-child(4){
          width: 14%;
          padding-left: 24px;
          border-right: none;
        }
        .order-content-title {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: @newColorGreyFontM;
          line-height: 22px;
        }
        .order-content-item-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }
        .order-content-text {
          font-size: 12px;
          font-family: DINAlternate, DINAlternate-Bold;
          font-weight: 700;
          line-height: 22px;
          text-align: right;
          color: @newColorGreyFontM;
          span:nth-child(2) {
            font-size: 16px;
          }
        }
        .order-content-item-bot {
          margin-top: 20px;
          display: flex;
          .price-title-row {
            width: 50%;
            div {
              text-align: right;
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              color: @newColorGreyFontM;
            }
            div:nth-child(1){
              opacity: 0.6;
            }
            div:nth-child(2){
              opacity: 0.8;
              font-size: 14px;
              font-family: DINAlternate, DINAlternate-Bold;
              font-weight: 700;
              span {
                color: @activeRed;
              }
            }
          }
        }
        .order-content-detail {
          display: flex;
          justify-content: space-between;
          opacity: 0.6;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: @newColorGreyFontM;
          margin-right: 3px;
        }
      }
    }
    .order-table {
      padding: 0 16px 16px 16px;
      .order-table-shadow {
        width: 100%;
        box-shadow: 0 0 5px 4px rgba(0,0,0,.06);     
      }
      .tb th { 
        padding: 9px 12px; 
      }
      .tb td { 
        padding: 9px 12px; 
      }
    }
  }
}
.align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.expand-item {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  &.active {
    span:first-child {
      background: url('../../../../assets/image/sellerHub/detailiconblue.png') center no-repeat;
      background-size: 16px 16px;
    }
    span:nth-child(2) {
      color: #3483FF;
    }
  }
  span:first-child {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../../../../assets/image/sellerHub/expandicon.png') center no-repeat;
    background-size: 16px 16px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 8px;
  }
  span:nth-child(2) {
    color: @newColorGreyFontM;
    margin-right: 6px;
  }
  span:nth-child(3) {
    color: #3483FF;
    cursor: pointer;
  }
}
.tips-icon{
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url('../../../../assets/image/sellerHub/questioniconred.png') center no-repeat;
  background-size: 13px 13px;
  vertical-align: middle;
  margin-top: -3px;
}
.post-serve-type {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  border-radius: 2px;
  text-align: center;
}
.post-serve-type.fulfill {
  color: #79c860;
  background-color: rgba(121,200,96,.08);
}
.post-serve-type.pending {
  color: #FF9003;
  background-color: rgba(255,144,3,.08);
}
.order-detail::-webkit-scrollbar{
  width:0;
}
.order-detail {
  scrollbar-width: none;
}
.order-detail {
  -ms-overflow-style: none;
}
/deep/ .ant-drawer-wrapper-body::-webkit-scrollbar{
  width:0;
}
/deep/ .ant-drawer-wrapper-body {
  scrollbar-width: none;
}
/deep/ .ant-drawer-wrapper-body {
  -ms-overflow-style: none;
}
.ipt-new {
  display: inline-block;
  width: 58.5%;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 2px;
  position: relative;
  margin-right: 8px;
  transition: all .3s;
  &:hover {
    border-color: #e3645f;
  }
  input {
    width: 100%;
    height: 32px;
    border: 0px;
    outline: none;
    padding-left: 12px;
    padding-right: 28px;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: @newColorGreyFontM;
  }
  .ipt-icon {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
}
.outer-box-new {
  width: 58.5%!important;
  .ipt-new {
    width: 100%;
    input {
      width: 100%;
    }
  }
}
.custom-th {
  cursor: pointer;
  &.active .table-th-icon {
    background: url('../../../../assets/image/sellerHub/shaixuan.png') center no-repeat;
    background-size: 16px 16px;
  }
}
.total-row table.tb td.red-col {
  color: @activeRed;
}
.rmb-icon {
  font-size: 12px;
  font-family: DINAlternate, DINAlternate-Bold;
  font-weight: 700;
  color: @activeRed;
}
.rmb-txt {
  font-size: 16px;
  margin-left: 3px;
  font-family: DINAlternate, DINAlternate-Bold;
  font-weight: 700;
  color: @activeRed;
}
.order-content-item .custom-bot-row {
  display: flex;
  justify-content: flex-end;
}
.order-table {
  th {
    padding: 11px 12px!important;
  }
  td {
    padding: 11px 12px!important;
  }
  thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  tbody {
    display: block;
    width: 100%;
    max-height: 203px;
    overflow-y: scroll;
  }
  tbody::-webkit-scrollbar{
    width:0;
  }
}
</style>